<template>
  <div class="login">
  <div class="head">
       <div class="close">x</div>
       <div class="logo">
           <img src="https://gfs10.gomein.net.cn/T10FhcBKYT1RCvBVdK.png" alt="" >
       </div>
       <!-- 输入任意文本 -->
<!-- 输入手机号，调起手机号键盘 -->
<van-form @submit="onSubmit">
  <van-field
    v-model="phone"
    name="phone"
    type="num"
    placeholder="请填写手机号"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="code"
    type="num"
    name="code"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div class="loginInput">
    <van-radio-group v-model="radio">
  <van-radio name="1" shape="square" icon-size=16></van-radio>
</van-radio-group>
未注册手机验证后自动注册,我已阅读并同意
</div>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" color="purple">登录</van-button>
  </div>
</van-form>
<button class="getCode" @click="handleGetCode">获取验证码</button>
<div class="newUser">
    <p>账号密码登录</p>
    <p @click='goRegister'>新用户注册</p>
</div>
  </div>
  </div>
</template>

<script>
import { getCode } from '@/api/login'
export default {
  name: 'login',
  data() {
    return {
      phone: '',
      code: '',
      radio: true,
    }
  },
  methods: {
    async onSubmit(values) {
      console.log('submit', values)
      // const result = await this.$store.dispatch('user/loginAction', values)
      // console.log(result)
      // if (result) {
      //   this.$router.push('./home')
      // } else {
      //   this.$toast({
      //     type: 'fail',
      //     message: '用户名或密码错误',
      //   },
      //   )
      // }
      const numList = JSON.parse(localStorage.getItem('phoneNum')) || []
      console.log(numList)
      if (numList.some(item => item === values.phone)) {
        const result = await this.$store.dispatch('user/loginAction', values)
        console.log(result)
        if (result) {
          this.$router.push('./home')
        } else {
          this.$toast({
            type: 'fail',
            message: '用户名或密码错误',
          },
          )
        }
      } else {
        this.$toast({
          type: 'fail',
          message: '亲！该手机号未注册！',
        },
        )
      }
    },
    async handleGetCode() {
      const result = await getCode(this.phone)
      console.log(result)
      this.$toast({
        type: 'success',
        message: result.code,
      },
      )
    },
    goRegister() {
      this.$router.push('/register')
    },
  },
}
</script>

<style lang="less" scoped>
.close{
    font-size: 20px;
    margin-left: 20px;
    margin-top: 20px;
    color: #ccc;
}
.logo{
    width: 350px;
    height: 200px;
    margin: 0 auto;
    img{
        width: 100%;
        height: 100%;
    }
}
van-field{
    padding: 0,100px;
}
.loginInput{
display: flex;
justify-content: center;
margin-top:20px ;
}
van-button{
    background-color: white;
}
.loginBtn{
    margin-top: 30px;
}
.newUser{margin-top: 50px;
    display: flex;
    justify-content: space-around;
}
.getCode{
    position: relative;
    top:-3.7rem;
    left: 7rem;
    outline: none;
    border: none;
    height: 50px;
    background: purple;
    color: white;
}
</style>
